<template>
  <div class="adress">
    <van-nav-bar
      title="新增地址"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { saveAddress } from '../../api/second/index.js';
export default {
  setup(props) {
    const searchResult = ref([]);
    const { back,push } = useRouter();
    const onChangeDetail = (val) => { // 填写详细地址的时候会触发
      if (val) {
        searchResult.value = [
          {
            name: '新亚创新产业园',
            address: '河南省郑州市经开区',
          },
        ];
      } else {
        searchResult.value = [];
      }
    }
    const onSave = (val) => { // 点击保存触发的函数
        // console.log(val);
        saveAddress({
          address: val.addressDetail,
          cityId: val.areaCode.slice(0,4)+'00',
          code: val.postalCode,
          districtId: val.areaCode,
          linkMan: val.name,
          mobile: val.tel,
          provinceId: val.areaCode.slice(0,2)+'0000',
          isDefault: val.isDefault,
          token: localStorage.getItem('token')
        }).then(res => {
            if (res.code == 0) {
              push('/addressList')
            }
        })
    }

    const onDelete = (val) => { // 点击删除时触发的函数
        // console.log(val);
        back();// 返回上一级
    }
    return{ 
      areaList,
      onSave,
      onDelete,
      searchResult,
      onChangeDetail
    }
  }
};
</script>
<style lang="scss" scoped>
.adress {
  height: 100%;
}
</style>
